<template>
	<view class="" style="padding: 28rpx;">
		<view class="wrap">
			<view class="msg dis">
				<view class="msg-top dis msg-com">
					<view class="msg-top-left">申请金额</view>
					<view class="msg-top-right">
						<picker @change="bindPickerChange" :value="index" range-key="tit" :range="array">
							<view class="uni-input">
								<text v-if="index!=null">
									还款期数为:{{array[index].tit}}
								</text>
								<text v-else>选择借款期数</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="msg-center dis">
					<view class="DIN">
						￥{{form.money}}
					</view>
					<view class="DIN" @click="openNum">
						<image src="@/static/icon_pen.png" mode=""></image>
					</view>

				</view>
				<view class="msg-bto dis msg-com">
					<view class="msg-bto-left">最低:￥{{info.min}}</view>
					<view class="msg-bto-right">最高:￥{{info.max}}</view>
				</view>
			</view>

		</view>

		<view class="wrap">
			<view class="msg1 dis">
				<view class="msg-top dis msg-com" v-for="(item,index) in list" :key="index"
					:style="index!==list.length-1?'border-bottom: 2rpx solid #EDEDED':''">
					<view class="msg-top-left">{{item.tit}}</view>
					<view class="msg-top-right">
						<view class="" v-if="item.msg=='change'">

							<picker @change="bindPickerChange1" :value="index1" range-key="tit" :range="array1">
								<view class="uni-input">
									<text v-if="index1!=null">
										{{array1[index1].tit}}
									</text>
									<text v-else>请选择</text>
									<image src="@/static/index/icon_hei_you.png" mode=""></image>
								</view>
							</picker>
						</view>
						<view class="" v-else>
							{{item.msg}}
						</view>


					</view>
				</view>

			</view>

		</view>
		<view class="wrap">
			<view class="msg1 dis">
				<view class="msg-top dis msg-com" @click="goPages('/pagesC/myList/bank')">
					<view class="msg-top-left">绑定银行卡</view>
					<view class="msg-top-right">
						{{bdMsg}}
						<image src="@/static/index/icon_hei_you.png" mode=""></image>
					</view>
				</view>

			</view>

		</view>

		<view class="xy">
			<image class="ty-img" @click="tyBtn" v-if="tyBtnIndex==false" src="@/static/index/icon_nor_ty.png"
				mode="aspectFit"></image>
			<image v-else class="ty-img" @click="tyBtn" src="@/static/index/icon_select_ty.png" mode="aspectFit">
			</image>

			<text>我已阅读并同意</text>
			<text class="name" @click="xyBtn('https://www.baidu.com')">
				《借款协议》
			</text>

		</view>
		<view class="btn" @click="submit">
			立即提现
		</view>
		<uni-popup ref="popup" type="center">
			<view class="changeMoney">
				<uni-easyinput class="uni-mt-5" :focus="true" trim="all" v-model="inputMony" type="number"
					placeholder="请输入金额" @confirm="submitMony"></uni-easyinput>
				<view class="changeMoney-des">
					*请输入正确的金额数字,所输入金额不能小于最低,也不能大于最高
				</view>
				<view class="btns" @click="submitMony">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		withdrawal
	} from '@/api/index.js'
	let inputMony = ref(null)
	const {
		proxy
	} = getCurrentInstance();
	let tyBtnIndex = ref(false);

	onShow(() => {
		init()
		uni.$on('updateData', (data) => {
			bdMsg.value = data
			uni.$off('updateData'); // 取消事件监听，防止内存泄漏
		});
	});
	let init = async () => {
		let res = await withdrawal()
		info.value = res.data
		info.value.min = 100
		info.value.max = info.value.money
		form.value.money = info.value.money
		list.value[3].msg = info.value.date || ''
		list.value[1].msg = info.value.annual + '%' || ''
	};
	let form = ref({
		hkqx: '',
		money: null,
		hkfs: '',
		hklx:null
	})
	let bdMsg = ref('去绑定')
	let info = ref({

	})
	let list = ref([{
			tit: '还款方式',
			msg: 'change'
		},
		{
			tit: '年利率',
			msg: ''
		},
		{
			tit: '总利息',
			msg: 0
		},
		{
			tit: '还款日',
			msg: ''
		}
	])
	// 选择狂
	let array = ref([{
		tit: '6个月',
		id: 6
	}, {
		tit: '9个月',
		id: 9
	}, {
		tit: '12个月',
		id: 12
	}, {
		tit: '24个月',
		id: 24
	}, {
		tit: '36个月',
		id: 36
	}])
	let array1 = ref([{
		tit: '等额本息',
		id: 1
	}, {
		tit: '等额本金',
		id: 2
	}])

	// let array = ref(['中国', '美国', '巴西', '日本'])
	let index = ref(null)
	let index1 = ref(null)
	let submitMony = () => {
		const regex = /^-?\d+(\.\d{1,2})?$/;
		if (!regex.test(inputMony.value)) {
			proxy.$ts("请填写正确的金额")
			return;
		} else if (inputMony.value > info.value.max) {
			proxy.$ts("输入的金额不能大于最大金额")
			return;
		} else if (inputMony.value < info.value.min) {
			proxy.$ts("输入的金额不能小于最小金额")
			return;
		}
		form.value.money = inputMony.value
		proxy.$refs.popup.close()
		computeRate()

		// console.log(form.value.money,'form.money')
	}
	let bindPickerChange = (e) => {
		index.value = e.detail.value
		form.value.hkqx = array.value[index.value].id
		computeRate()
	};
	let bindPickerChange1 = (e) => {
		if(index.value==null){
			proxy.$ts("请选择还款期数")
			return;
		}
		index1.value = e.detail.value
		form.value.hkfs = array1.value[index1.value].id

		computeRate()
	};
	let openNum = () => {
		inputMony.value = null
		proxy.$refs.popup.open()
	}
	let tyBtn = () => {
		tyBtnIndex.value = !tyBtnIndex.value
	};
	let submit = () => {
		if(index.value==null){
			proxy.$ts("请选择借款期数")
			return;
		}else if(index1.value==null){
			proxy.$ts("请选择还款方式")
			return;
		}else if (tyBtnIndex.value == false) {
			proxy.$ts("请勾选《借款协议》")
			return;
		}
		// console.log("可以走了")
		console.log(form.value,'要提交的')
	}
	let goPages = (url) => {
		uni.navigateTo({
			url
		})
	};
	let computeRate = () => {
		let principal = Number(form.value.money);
		let rate = Number(info.value.annual);
		let time = form.value.hkqx;
		let simpleInterest = null;
		if (form.value.hkfs == 1) {
			simpleInterest = calculateEqualInstallment(principal, time,rate)
		} else if (form.value.hkfs == 2) {
			simpleInterest = calculateEqualPrincipal(principal, time,rate)
		}
		if(simpleInterest!=null){
			list.value[2].msg = '￥' + simpleInterest.toFixed(2) || 0
			form.value.hklx= simpleInterest.toFixed(2)
		}
	}
	function calculateEqualPrincipal(principal, month, annualRate) {
	  const months = month;
	  const monthlyRate = annualRate / 12;
	  const monthlyPrincipal = principal / months;
	  let totalInterest = 0;
	  
	  for (let i = 0; i < months; i++) {
	    const remainingPrincipal = principal - (monthlyPrincipal * i);
	    const monthlyInterest = remainingPrincipal * monthlyRate;
	    totalInterest += monthlyInterest;
	  }
	  
	  return totalInterest;
	}

	let calculateEqualInstallment = (principal, month, annualRate) => {
		const months = month;
		const monthlyRate = annualRate / 12;
		const temp = Math.pow(1 + monthlyRate, months);
		const monthlyPayment = principal * monthlyRate * temp / (temp - 1);
		const totalInterest = monthlyPayment * months - principal;

		return totalInterest;
	};


	let calculateSimpleInterest = (principal, rate, time) => {
		// 确保利率和时间是以小数形式给出，例如年利率为5%，则应输入0.05
		let interest = principal * rate * time;
		return interest;
	};
	let monthsToYears = (months) => {
		const daysPerMonth = 30; // 假设每个月有30天，简化计算
		const daysPerYear = 365; // 一年按365天计算
		const days = months * daysPerMonth;
		const years = days / daysPerYear;
		return years;
	};
</script>
<style lang="scss" scoped>
	.changeMoney-des {
		color: red;
		font-size: 20rpx;
		margin-top: 20rpx;

	}

	.changeMoney {
		.btns {
			width: 80%;
			margin: 0 auto;
			margin-top: 40rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			background: $mian-color;
			border-radius: 100rpx;
		}

		width: 500rpx;
		background: #fff;
		border-radius: 30rpx;
		// height: 150rpx;
		padding: 60rpx;
	}

	.wrap {
		.msg1 {
			.msg-top {
				height: 100rpx;
				line-height: 100rpx;

				.msg-top-right {
					font-weight: 400;
					font-size: 28rpx;
					color: #1B1B1E;

					image {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}

				.msg-top-left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1B1B1E;
				}
			}

			.msg-com {
				justify-content: space-between;
			}

			width: 85%;
			// border: 1px solid red;
			margin: 0 auto;
			// height: 300px;
			flex-direction: column;
		}

		.msg {
			.msg-bto {
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.msg-center {
				align-items: center;
				padding: 20rpx 0;
				font-weight: bold;
				font-size: 60rpx;
				color: #333333;
				border-bottom: 1px solid #EDEDED;

				image {
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
					margin-left: 20rpx;
				}
			}

			.msg-top {
				.msg-top-right {
					font-weight: 400;
					font-size: 24rpx;
					color: $mian-color;

				}

				.msg-top-left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #1B1B1E;
				}
			}

			.msg-com {
				justify-content: space-between;
			}

			width: 85%;
			// border: 1px solid red;
			margin: 0 auto;
			// height: 300px;
			padding: 30rpx 0;
			flex-direction: column;
		}

		background: #fff;
		border-radius: 12rpx;
		// height: 600rpx;
		// padding: 30rpx 0;
		margin-bottom:30rpx;

	}

	.btn {
		width: 80%;
		margin: 0 auto;
		margin-top: 100rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		background: $mian-color;
		border-radius: 100rpx;
	}

	.xy {
		font-weight: 400;
		margin-top: 20rpx;
		color: #D1D1D1;
		font-size: 24rpx;

		.name {
			color: $mian-color;
		}

		.ty-img {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		}
	}
</style>
<style>
	page {
		background: #F3F4F5;

		margin: 0 auto;
		/* padding-top: 30rpx; */
		/* padding: 24rpx 28rpx; */
	}
</style>